<template>
  <transition name="zoom-in-top" @after-leave="$emit('dodestroy')">
    <div
      v-show="currentVisible"
      class="time-panel">
      <div class="time-panel__content" :class="{ 'has-seconds': showSeconds }">
        <time-spinner
          ref="spinner"
          @change="handleChange"
          :show-seconds="showSeconds"
          @select-range="setSelectionRange"
          :hours="hours"
          :minutes="minutes"
          :seconds="seconds">
        </time-spinner>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  import { DateUtils } from '../utils'
  import LOCALES from '../../../locales'
  import TimeSpinner from '../basic/time-spinner.vue'

  export default {
    components: {
      TimeSpinner
    },

    props: {
      date: {
        default () {
          return new Date()
        }
      },
      visible: Boolean
    },

    watch: {
      visible (val) {
        this.currentVisible = val
      },

      value (newVal) {
        let date
        if (newVal instanceof Date) {
          date = DateUtils.limitRange(newVal, this.selectableRange)
        } else if (!newVal) {
          date = new Date()
        }

        this.handleChange({
          hours: date.getHours(),
          minutes: date.getMinutes(),
          seconds: date.getSeconds()
        })
      },

      selectableRange (val) {
        this.$refs.spinner.selectableRange = val
      }
    },

    data () {
      return {
        format: 'HH:mm:ss',
        value: '',
        hours: 0,
        minutes: 0,
        seconds: 0,
        selectableRange: [],
        currentDate: this.$options.defaultValue || this.date || new Date(),
        currentVisible: this.visible || false,
      }
    },

    computed: {
      showSeconds () {
        return (this.format || '').indexOf('ss') !== -1
      }
    },

    methods: {

      getLocale: LOCALES.GetLocale,

      handleClear () {
        this.$emit('pick')
      },

      handleCancel () {
        this.$emit('pick')
      },

      handleChange (date) {
        if (date.hours !== undefined) {
          this.currentDate.setHours(date.hours)
          this.hours = this.currentDate.getHours()
        }
        if (date.minutes !== undefined) {
          this.currentDate.setMinutes(date.minutes)
          this.minutes = this.currentDate.getMinutes()
        }
        if (date.seconds !== undefined) {
          this.currentDate.setSeconds(date.seconds)
          this.seconds = this.currentDate.getSeconds()
        }

        this.handleConfirm(true)
      },

      setSelectionRange (start, end) {
        this.$emit('select-range', start, end)
      },

      handleConfirm (visible = false, first) {
        if (first) return
        const date = new Date(DateUtils.limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'))
        this.$emit('pick', date, visible, first)
      }
    },

    created () {
      this.hours = this.currentDate.getHours()
      this.minutes = this.currentDate.getMinutes()
      this.seconds = this.currentDate.getSeconds()
    },

    mounted () {
      this.$nextTick(() => this.handleConfirm(true, true))
      this.$emit('mounted')
    }
  }
</script>
